<template>
  <div class="side-nav" :class="{ 'is-open': isOpen }">
    <div class="side-nav-overlay" @click="close"></div>
    <div class="side-nav-content">
      <el-menu
        class="side-menu"
        :collapse="false"
        :default-active="activeMenu"
        :default-openeds="['2', '3', '4']"
        :background-color="'#fff'"
        :text-color="'#111'"
      >
        <el-menu-item index="1" class="menu-header">
          <div class="header-content">
<!--            <i class="fas fa-user-circle"></i>-->
            <img v-if="userStore.userInfo?.member?.face" :src="userStore.userInfo?.member?.face" class="avatar" alt="">
            <span class="login-text">

              {{ $t('您好') }}，
              <template v-if="userStore.isLogin">
                {{ userStore.userInfo?.member?.nickName }}
              </template>
              <template v-else>
                <span class="login-link" @click="handleLogin">{{ $t('请登录') }}</span>
              </template>
            </span>
          </div>
          <i class="fas fa-times close-btn" @click.stop="close"></i>
        </el-menu-item>

        <el-sub-menu index="2">
          <template #title>
            <i class="fas fa-mobile-alt"></i>
            <span>{{ $t('热门活动') }}</span>
          </template>
          <el-menu-item index="/deals" @click="handleDealsClick">{{ $t('限时秒杀') }}</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <i class="fas fa-th-large"></i>
            <span>{{ $t('全部分类') }}</span>
          </template>
          <el-menu-item
            v-for="category in cartStore.fatherCategoryList"
            :key="category.id"
            :index="`/products/category/${category.catId}`"
            @click="handleCategoryClick(category)"
          >
            {{ category.name }}
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item-group>
          <template #title>
            <span class="group-title">{{ $t('帮助和设置') }}</span>
          </template>
          <el-menu-item index="/account" @click="handleAccountClick">{{ $t('我的账户') }}</el-menu-item>
          <el-menu-item index="/language" @click="handleLanguageClick">
            <i class="fas fa-globe"></i>
            <img
              :src="langStore.languageIcon"
              :alt="langStore.languageName"
              class="flag-icon"
            />
            {{ langStore.languageName }}
          </el-menu-item>
          <!-- <el-menu-item index="5-3" @click="promoteFriends">{{ $t('推广好友') }}</el-menu-item> -->
          <el-menu-item index="5-3" @click="handleCustomerService">{{ $t('客户服务') }}</el-menu-item>
          <el-menu-item index="5-4" @click="handleLoginOrLogout">
            {{ userStore.isLogin ? $t('退出登录') : $t('请登录') }}
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useLangStore from "@/store/modules/lang";
import useCartStore from "@/store/modules/cart.js";
import useUserStore from '@/store/modules/user'
import {ElMessage, ElMessageBox} from "element-plus";

import {useI18n} from "vue-i18n";
const { t } = useI18n();

const router = useRouter()
const route = useRoute()
const langStore = useLangStore()
const cartStore = useCartStore()
const userStore = useUserStore()

const isOpen = ref(false)
const activeMenu = ref('')
watchEffect(() => {
  activeMenu.value = route.path + (route.query?.catId ? `/${route.query?.catId}` : '')
})

const open = () => {
  isOpen.value = true
  document.body.style.overflow = 'hidden'
}

const close = () => {
  isOpen.value = false
  document.body.style.overflow = ''
}

const handleLogin = () => {
  close()  // 关闭侧边栏
  router.push('/login')
}

const handleLanguageClick = () => {
  close()
  router.push('/language')
}

const handleCategoryClick = (v) => {
  close()  // 点击后关闭侧边栏
  router.push({
    path: '/products/category',
    query: {
      catId: v.catId,
      name: v.name
    }
  })
}

const handleDealsClick = () => {
  router.push('/deals')
  close()  // 点击后关闭侧边栏
}

const handleAccountClick = () => {
  router.push('/account')
  close()
}

const promoteFriends = () => {
  if (!userStore.isLogin) {
    ElMessage.warning(t('请先登录'))
    return
  }
  const url = `https://tw-coinget.com/#/register?inviteCode=${userStore.userInfo.member.inviteCode}`
  ElMessageBox.alert(url, t('推广好友链接'), {
    confirmButtonText: t('复制'),
    callback: async () => {
      await navigator.clipboard.writeText(url);
      ElMessage.success(t('复制成功'))
    },
  })
}

const handleCustomerService = () => {
  router.push('/account/customer-service')
}

const handleLoginOrLogout = () => {
  if (userStore.isLogin) {
    userStore.logOut().then(() => {
      window.location.reload()
    })
  } else {
    router.push('/login')
  }
  close()
}

defineExpose({
  open,
  close
})
</script>

<style lang="scss" scoped>
.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $z-index-modal;
  visibility: hidden;

  &.is-open {
    visibility: visible;

    .side-nav-overlay {
      opacity: 1;
    }

    .side-nav-content {
      transform: translateX(0);
    }
  }
}

.side-nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.side-nav-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 365px;
  height: 100%;
  background: $text-white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;

  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.side-menu {
  border-right: none;

  :deep(.el-sub-menu__icon-arrow) {
    display: none;
  }

  i {
    margin-right: 10px;
    min-width: 24px;
    text-align: center;
    font-size: 18px;
  }

  :deep(.el-menu-item) {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    padding: 0 16px;

    &.menu-header {
      background: $primary-light;
      color: $text-white;
      font-weight: bold;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      padding-right: $spacing-md;

      .header-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
      }

      &:hover {
        background: $primary-light;
        cursor: default;
      }

      .close-btn {
        font-size: 24px;
        cursor: pointer;
        position: absolute;
        right: $spacing-md;
        top: 50%;
        transform: translateY(-50%);
        width: auto;

        &:hover {
          opacity: 0.8;
        }
      }

      .fa-user-circle {
        font-size: 24px;
        margin-left: 0;
      }
    }

    &:hover {
      background-color: #eaeded;
    }
  }

  :deep(.el-sub-menu__title) {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 16px;

    &:hover {
      background-color: #eaeded;
    }
  }

  :deep(.el-menu-item-group__title) {
    padding: 20px 20px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #111;
    line-height: 1;
  }
}

.flag-icon {
  width: 18px;
  height: 13px;
  margin: 0 8px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 8px;
  .avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }

  i {
    font-size: 24px;
    color: $text-white;
  }

  .login-text {
    color: $text-white;
    font-size: 18px;
    font-weight: bold;
  }

  .login-link {
    cursor: pointer;
    color: $text-white;
    transition: color 0.2s ease;
    display: inline-block;

    &:hover {
      color: $secondary-color;
      text-decoration: underline;
    }
  }
}
</style>
